<template>
  <el-container>
    <el-header>
      <div class="flex">
        <div>流程模板管理</div>
        <div style="margin-left:15px;">
          <el-dropdown @command="handleNewBill">
            <el-button type="primary" size="small">
              <i class="el-icon-plus" />
              新增
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in selectTypes" :key="item.value" :command="item.value">{{ item.label }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-row class="flex flex-between">
        <el-col :span="8" :offset="1">
          <el-select
            v-model="dataQuery.isEnable"
            placeholder="流程状态"
            @change="isEnableChange"
          >
            <el-option label="所有" :value="99" />
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-col>
        <el-col :span="24" :offset="1">
          <el-input
            v-model="dataQuery.searchKey"
            placeholder="模板名称"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleFilter"
            />
          </el-input>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="main-full-height bg-white">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" :index="indexMethod" width="70px" align="center" />
        <el-table-column prop="Name" label="模板名称" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="toDetail(scope.row.Id)">{{
              scope.row.Name
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="模板类型" width="120px">
          <template slot-scope="scope">
            <span>{{ formartType(scope.row.DesignType) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="CreateTime" label="创建时间" width="180px" />
        <el-table-column prop="CreateUserName" label="创建人" width="180px" />
        <el-table-column label="模板状态" width="150px" align="center">
          <template slot-scope="{row}">
            <el-tag
              v-if="row.IsEnable"
              type="primary"
              size="medium"
            >启用</el-tag>
            <el-tag
              v-else
              type="danger"
              size="medium"
            >禁用</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="handleDel(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
        <template slot="empty">
          <HelpTips :page-name="'flow'" />
        </template>
      </el-table>
    </el-main>

    <el-footer>
      <el-pagination
        :total="dataTotal"
        :current-page.sync="dataQuery.pageIndex"
        :page-size="dataQuery.pageSize"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
      />
    </el-footer>
    <el-dialog :title="isEdit?'修改'+form.Name:'新建模板'" :visible.sync="editDialogVisible" :close-on-click-modal="false" width="70%" top="8vh" :append-to-body="true">
      <el-container>
        <el-main class="bg-white ">
          <el-main class="main-full-height " style="overflow:hidden;padding:0;height: calc(90vh - 190px);">
            <el-steps :active="stepActive" simple align-center finish-status="success">
              <el-step title="基础信息设置">
                <template slot="title">
                  <div>基础信息设置</div>
                </template>
              </el-step>
              <el-step title="流程字段设置">
                <template slot="title">
                  <div>流程字段设置</div>
                </template>
              </el-step>
              <el-step title="审批流程设置">
                <template slot="title">
                  <div>审批流程设置</div>
                </template>
              </el-step>
              <!-- <el-step title="打印设置">
                <template slot="title">
                  <div>打印设置</div>
                </template>
              </el-step> -->
            </el-steps>
            <el-divider />
            <el-row v-if="stepActive==0">
              <el-col :span="12" :offset="6">
                <el-form ref="form" :model="form" label-width="120px" style="margin-top:20px">
                  <el-form-item label="流程类型">
                    <el-select v-model="form.DesignType" placeholder="请选择">
                      <el-option v-for="item in selectTypes" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="流程名称">
                    <el-input v-model="form.Name" placeholder="请输入流程名称" />
                  </el-form-item>
                  <el-form-item label="是否启用">
                    <el-switch
                      v-model="form.IsEnable"
                    />
                  </el-form-item>
                  <el-form-item label="流程适用范围">
                    <el-input placeholder="不选表示全员可用" suffix-icon="el-icon-arrow-right" @focus="showSelectAllInOneDialog()" />
                    <el-tag v-for="p in form.Permission" :key="p.Id" size="mini" type="primary">{{ p.Name }}</el-tag>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>

            <el-row v-if="stepActive==1">
              <form-detail ref="formdetail" :is-edit="isEdit" :form-data.sync="form.FormContent" :scheme-type="form.DesignType" />
            </el-row>
            <el-row v-if="stepActive==2">
              <flowSetting ref="flowsetting" :is-edit="isEdit" :flow-data.sync="form.DesignContent" :form-data.sync="form.FormContent" :scheme-type="form.DesignType" />
            </el-row>
            <!-- <el-row v-if="stepActive==3">
              <el-container>
                <el-aside>
                  <el-header>
                    <div>打印设置</div>
                  </el-header>
                  <el-main />
                </el-aside>
                <el-main class="bg-white" style="height:calc(100vh - 320px);  overflow:scroll;box-shadow:2px 3px 5px #aaa">
                  <div class="print-table">
                    <div class="triangle-topleft " />
                    <pdf
                      v-if="pdfUrl.length>0"
                      ref="pdf"
                      :src="pdfUrl"
                    />
                  </div>
                </el-main>
              </el-container>
            </el-row> -->
          </el-main>
          <el-footer>

            <div>
              <el-button v-if="stepActive >0" style="margin-top: 12px;" @click="pre">上一步</el-button>
              <el-button v-if="stepActive <2 " style="margin-top: 12px;" @click="next">下一步</el-button>
              <el-button
                v-if="stepActive >1 || isEdit"
                type="primary"
                size="medium"
                @click="onSubmit"
              >保存</el-button>
            </div>
          </el-footer>

        </el-main>

        <selectAllInOne ref="selectallinonedialog" :echo-list="form.Permission" @allSelect="allSelect" />
      </el-container>

    </el-dialog>
  </el-container>

</template>
<script>
import pdf from 'vue-pdf'
import selectAllInOne from '@/views/components/permissions/selectpersonroledepartment'
import FormDetail from './formDetail'
import flowSetting from './flowsetting'
import HelpTips from '@/views/components/common/helptips/help'
import { loadAll, add, update, previewPdf, Delete } from '@/api/flow/index'
export default {
  components: { pdf, selectAllInOne, FormDetail, flowSetting, HelpTips },
  data() {
    return {
      listLoading: false,
      tableData: [],
      dataTotal: 0,
      dataQuery: {
        pageIndex: 1,
        pageSize: 20,
        searchKey: '',
        isEnable: 99
      },
      selectTypes: [{
        value: 1,
        label: '考勤管理'
      },
      {
        value: 2,
        label: '财务管理'
      }, {
        value: 3,
        label: '行政管理'
      }
      ],
      editDialogVisible: false,
      stepActive: 0, // active
      form: {
        Id: '',
        Name: '',
        UnitId: '',
        DesignType: 0,
        DesignContent: {},
        FormContent: [],
        Permission: [],
        IsEnable: true,
        Remark: '',
        IsDistinctVerifier: false
      },
      isEdit: false, // 是否编辑状态
      pdfUrl: ''
    }
  },
  created() {
    this.loadBill()
  },
  methods: {

    loadBill() {
      this.listLoading = true
      loadAll(this.dataQuery).then(res => {
        this.tableData = res.TableData
        this.dataTotal = res.TotalItemCount
        this.listLoading = false
      })
    },
    handleFilter() {
      this.dataQuery.pageIndex = 1
      this.loadBill()
    },
    isEnableChange() {
      this.dataQuery.pageIndex = 1
      this.loadBill()
    },
    indexMethod(index) {
      var pageIndex =
        this.dataQuery.pageIndex <= 1 ? 0 : this.dataQuery.pageIndex - 1
      return pageIndex * 20 + index + 1
    },
    handleCurrentChange(index) {
      this.dataQuery.pageIndex = index
      this.loadBill()
    },
    handleNewBill(c) {
      this.editDialogVisible = true
      this.isEdit = false
      this.reSetForm()
      this.stepActive = 0
      this.form.DesignType = c
      // this.loadPdfTemp(c)
    },
    handleEdit(row) {
      this.editDialogVisible = true
      this.reSetForm()
      this.stepActive = 0
      this.isEdit = true
      this.form = Object.assign({}, row)
      this.form.FormContent = JSON.parse(this.form.FormContent)
      this.form.DesignContent = JSON.parse(this.form.DesignContent)
      this.form.Permission = JSON.parse(this.form.Permission)
    },
    saveSuccess() {
      this.editDialogVisible = false
      this.dataQuery.pageIndex = 1
      this.loadBill()
    },
    handleDel(row) {
      var _this = this
      _this.$confirm('确认删除流程模板【' + row.Name + '】吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var paras = row.Id
          Delete(paras).then(res => {
            _this.$message({
              message: res.Msg,
              type: 'success',
              duration: 5 * 1000
            })
            _this.dataQuery.pageIndex = 1
            _this.loadBill()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    loadPdfTemp(type) {
      if (type) {
        previewPdf(type).then(res => {
          this.pdfUrl = res.Data
        })
      }
    },
    reSetForm() {
      this.form = {
        Id: '',
        Name: '',
        UnitId: '',
        DesignType: 0,
        DesignContent: {},
        FormContent: [],
        Permission: [],
        IsEnable: true,
        Remark: '',
        IsDistinctVerifier: false
      }
    },
    onSubmit() {
      if (this.stepActive === 1) {
        this.$refs.formdetail.updateForm()
      }
      if (this.stepActive === 2) {
        var result = this.$refs.flowsetting.updateFlow()
        if (!result) {
          return false
        }
      }
      if (this.form.Name.length < 1) {
        this.$message({
          message: '请输入流程名称',
          type: 'error',
          duration: 3 * 1000
        })
      } else if (this.form.FormContent.length < 1) {
        this.$message({
          message: '请先设计流程表单',
          type: 'error',
          duration: 3 * 1000
        })
      } else if (this.form.DesignContent.length < 1) {
        this.$message({
          message: '请先设计流程流程',
          type: 'error',
          duration: 3 * 1000
        })
      } else {
        var reqdata = Object.assign({}, this.form)
        reqdata.FormContent = JSON.stringify(reqdata.FormContent)
        reqdata.DesignContent = JSON.stringify(reqdata.DesignContent)
        reqdata.Permission = JSON.stringify(reqdata.Permission)
        if (reqdata.Id.length > 0) {
          update(reqdata).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 3 * 1000
            })
            this.saveSuccess()
          })
        } else {
          add(reqdata).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 3 * 1000
            })
            this.saveSuccess()
          })
        }
      }
    },
    next() {
      if (this.stepActive === 0) {
        if (this.form.Name.length < 1) {
          this.$message({
            message: '请输入流程名称',
            type: 'error',
            duration: 3 * 1000
          })
          return
        }
      }
      if (this.stepActive === 1) {
        this.$refs.formdetail.updateForm()
      }
      if (this.stepActive === 2) {
        var result = this.$refs.flowsetting.updateFlow()
        if (!result) {
          return false
        }
      }
      if (this.stepActive++ > 2) { this.stepActive = 0 }
    },
    pre() {
      if (this.stepActive === 1) {
        this.$refs.formdetail.updateForm()
      }
      if (this.stepActive === 2) {
        var result = this.$refs.flowsetting.updateFlow()
        if (!result) {
          return false
        }
      }
      if (this.stepActive-- < 0) { this.stepActive = 0 }
    },
    showSelectAllInOneDialog() {
      this.$refs.selectallinonedialog.showSelectAllInOneDialog()
    }, // 回调方法
    allSelect(taglist) {
      this.form.Permission = taglist
    },
    formartType(t) {
      var defaultV = '未知'
      switch (t) {
        case 1:
          defaultV = '考勤管理'
          break
        case 2:
          defaultV = '财务管理'
          break
        case 3:
          defaultV = '行政管理'
          break
        default:
          break
      }
      return defaultV
    }
  }

}

</script>
<style lang="scss" scoped>
::v-deep.el-select .el-input__inner{
  vertical-align: middle;
}
.el-tag{
   margin: 5px;

 }
 .triangle-topleft {
   height: 0;
   width: 0;
   border-top: 80px #ddd solid;
   border-right: 80px transparent solid;
   position: absolute;
 }
 .triangle-topleft::before{
   content: '表单预览';
   transform: rotate(45deg);
   display: block;
    /* width: 100%; */
    margin-top: -80px;
    margin-left: 25px;
    font-size: 10px;
    color: #aaa;
    position:static;
    line-height: 14px;
 }
 .print-table{
 text-align: center;
   .title{
     font-weight: bold;
     font-size: 18px;
     line-height: 100px;

   }
 }
 .modal-item +.modal-item{
   border-top:1px dashed #f1f1f1;
 }
 .el-step.is-simple:not(:last-of-type) .el-step__title{
   max-width: unset !important;
 }
 .el-step__title{

   &:hover div{
     cursor: pointer;
     transform: scale(1.05,1.05);
     transition-duration: 0.5s;
   }
 }
 </style>
